JavaScriptおみくじ 〜その2〜
今回は、JavaScriptおみくじの第2弾ということで、ボタンをクリックするたびに結果が変わる「おみくじ」を紹介してみましょう。基本的な考え方は、前回の「JavaScriptおみくじ 〜その1〜」と同じです。

→ まずはサンプルを確認してください
 
JavaScriptおみくじ 〜その2〜


→ 名前をつけて「おみくじ」画像を表示させる
 
まずは、「おみくじ」の結果を表示させる場所を確保しましょう。 IMGタグを使って、適当な画像を表示させます。最初は「おみくじ」などの文字が書かれた画像を表示させておくとよいでしょう。
なお、このIMGタグには必ずname属性を追加し、名前をつけておくようにします。
<IMG src="kuji00.jpg" name="kujiimage">


→ おみくじ用のボタンを作成する
 
続いて、「おみくじ」をひくためのボタンを作成します。
FORMとINPUTを使用し、「今日の運勢を占う」ボタンを作成してください。
さらに、onClickイベントを追加し、ボタンをクリックするごとに、自作のJavaScript関数「omikuji( )」が呼び出されるようにします。
<FORM>
<INPUT type="button" value="今日の運勢を占う" onclick="omikuji( )">
</FORM>


→ JavaScript関数「omikuji( )」を自作する
 
あとは、自作のJavaScript関数「omikuji( )」を作成すれば「おみくじ」は完成です。
この関数の考え方は、基本的に前回の「JavaScriptおみくじ  〜その1〜」と同じです。
つまり、(乱数の発生)→(画像の表示)という処理を行うわけです。
前回と異なるのは、「document.(IMGタグの名前).src =」で画像のsrc属性を直接変更していることです。
なお、今回は4パターンの結果がある「おみくじ」としてみました。
<SCRIPT language="JavaScript">
<!--
images = new Array("kuji01.jpg","kuji02.jpg","kuji03.jpg","kuji04.jpg");
function omikuji( ){
  a = Math.floor(Math.random( )*4);
  document.kujiimage.src = images[a];
}
// -->
</SCRIPT>

yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze